import React, { Component } from 'react';
import { FlatList, ScrollView, TouchableOpacity } from 'react-native';
import InputItem from 'antd-mobile-rn/lib/input-item';
import styled from 'styled-components';
import { Actions } from 'react-native-router-flux';

export default class PhoneBook extends Component {
  render() {
    const users = [
      {
        id: 1,
        name: '何雅婷'
      },
      {
        id: 2,
        name: '程浩伦2'
      },
      {
        id: 3,
        name: '程浩伦3'
      },
      {
        id: 4,
        name: '程浩伦4'
      },
      {
        id: 5,
        name: '程浩伦5'
      },
      {
        id: 6,
        name: '程浩伦6'
      },
      {
        id: 7,
        name: '程浩伦7'
      },
      {
        id: 8,
        name: '程浩伦12'
      },
      {
        id: 9,
        name: '程浩伦8'
      },
      {
        id: 10,
        name: '程浩伦11'
      }
    ];

    return (
      <Container>
        <Header>
          <HeaderTitle>通讯录</HeaderTitle>
          <TouchableOpacity onPress={() => Actions.phonebook()}>
            <SearchContacts
              placeholder="搜索与查看通讯录"
              editable={false}
              onFocus={() => Actions.phonebook()}>
              <SearchIcon
                source={require('../../assets/phonebook/search_icon.png')}
              />
            </SearchContacts>
          </TouchableOpacity>
        </Header>
        <Content>
          <ContentTitle>最近联系人</ContentTitle>
          {users.length ? (
            <ScrollView
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{
                paddingBottom: 200
              }}>
              <FlatList
                data={users}
                renderItem={({ item }) => (
                  <UserBox>
                    <UserPrefix>
                      <PrefixText>{item.name[0]}</PrefixText>
                    </UserPrefix>
                    <UserName key={item.id}>{item.name}</UserName>
                  </UserBox>
                )}
              />
            </ScrollView>
          ) : (
            <NoRecentContacts>没有最近联系人</NoRecentContacts>
          )}
        </Content>
      </Container>
    );
  }
}

const Container = styled.View`
  width: 100%;
  height: 100%;
  padding-top: 30;
  padding-left: 14;
  padding-right: 14;
  background-color: white;
`;

const Header = styled.View`
  height: 100;
  width: 100%;
  background-color: white;
`;

const HeaderTitle = styled.Text`
  color: #070707;
  font-size: 30;
  margin-bottom: 9;
`;

const Content = styled.View`
  width: 100%;
  height: 100%;
  background-color: white;
  margin-top: 41.33;
`;

const ContentTitle = styled.Text`
  color: #040404;
  font-size: 17.33;
  border-bottom-width: 1;
  border-bottom-color: #ededed;
  padding-bottom: 10;
`;
const UserBox = styled.View`
  flex-direction: row;
  align-items: center;
`;
const UserPrefix = styled.View`
  width: 34;
  height: 34;
  border-radius: 34;
  background-color: #5593ff;
  justify-content: center;
  align-items: center;
  margin-right: 14.33;
`;
const PrefixText = styled.Text`
  font-size: 14;
  color: white;
`;
const UserName = styled.Text`
  padding-top: 19.67;
  padding-bottom: 19.67;
  width: 100%;
  color: #333333;
  font-size: 15.33;
  border-bottom-width: 1;
  border-bottom-color: #ededed;
`;

const NoRecentContacts = styled.Text`
  padding-top: 20;
  text-align: center;
`;

const SearchContacts = styled(InputItem)`
  background-color: #f1f1f3;
  border-radius: 12;
`;
const SearchIcon = styled.Image`
  width: 16.67;
  height: 16.67;
  margin-left: 30;
`;
